<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.6.0.min.js" type="text/javascript"></script>
		<style>
			.font-red {
				color: red;
			}
			.font-blue {
				color: blue;
			}
			.font-size {
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<span id="span1">yihangwenzi</span>
		<ul>
			<li>星期一</li>
			<li>星期二</li>
			<li>星期三</li>
			<li>星期四</li>
			<li>星期五</li>
		</ul>
		<img src="../mall/image/daifukuan.png" >
		<input type="checkbox" name="" id="" value="" />
	</body>
	<script type="text/javascript">
		const a = $("#span1")[0];
		//动态添加class
		//添加多个class，只需在class之间加空格
		$("#span1").addClass("font-red font-blue font-size")
		// $("ul > li:odd").addClass("font-red")
		// $("ul > li:even").addClass("font-blue")
		//addclass callback
		$("ul>li").addClass(function(index, className){
			// console.log(index)
			// console.log(className)
			let classNameOri = className
			//可以执行更多的逻辑判断
			if(index%2 == 0) {
				classNameOri += " font-red"
				return classNameOri
			}
			if(index%2 != 0) {
				classNameOri += " font-blue"
				return classNameOri
			}
		})
		//移除className
		//不存在className时不会报错
		// $("ul>li").removeClass("font-red font-blue")
		// $(".font-blue").addClass("font-black")
		// $(".font-blue").removeClass("font-blue")
		$("ul>li").removeClass(function(index, className) {
			// console.log(index)
			// console.log(className)
			if(className !=-1){
				return "font-blue"
			}
			return ""
		})
		//attribute
		//查看attribute的值
		//标签上的所有属性
		const imgAttr = $("img").attr("src")
		//属性值的赋值
		//一次性赋予多个attribu
		$("img").attr({
			src: "../mall/image/daifukuanlight.png",
			alt: "addAlt"
		})
		//移除attribute
		$("img").removeAttr("alt")
		$("input[type='checkbox']").prop({
			checked: false,
			disabled: true
		})
		console.dir($("input[type='checkbox']").prop('checke'))
	</script>
</html>
